<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="golden-line line-1"></view>
			<view class="golden-line line-2"></view>
			<view class="golden-circle circle-1"></view>
			<view class="golden-circle circle-2"></view>
			<view class="golden-circle circle-3"></view>
		</view>

		<!-- 头部介绍 -->
		<view class="help-header">
			<view class="header-content">
				<view class="help-icon">
					<text class="icon-text">🛟</text>
				</view>
				<text class="help-title">帮助与支持</text>
				<text class="help-subtitle">为您提供全方位的服务支持</text>
			</view>
		</view>

		<!-- 快速联系 -->
		<view class="quick-contact">
			<view class="section-header">
				<text class="section-title">快速联系</text>
				<view class="title-divider"></view>
			</view>
			
			<view class="contact-cards">
				<view class="contact-card primary-card" @click="makeCall">
					<view class="card-glow"></view>
					<view class="card-content">
						<view class="contact-icon phone-icon">
							<text class="icon-text">📞</text>
						</view>
						<view class="contact-info">
							<text class="contact-title">客服电话</text>
							<text class="contact-value">{{ contactInfo.phone || '400-123-4567' }}</text>
							<text class="contact-desc">工作日 9:00-18:00</text>
						</view>
						<view class="contact-action">
							<text class="action-text">立即拨打</text>
						</view>
					</view>
				</view>

				<view class="contact-card secondary-card" @click="copyWechat">
					<view class="card-glow"></view>
					<view class="card-content">
						<view class="contact-icon wechat-icon">
							<text class="icon-text">💬</text>
						</view>
						<view class="contact-info">
							<text class="contact-title">微信客服</text>
							<text class="contact-value">{{ contactInfo.wechat || 'english_service' }}</text>
							<text class="contact-desc">在线咨询服务</text>
						</view>
						<view class="contact-action">
							<text class="action-text">复制微信</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 机构介绍 -->
		<view class="about-section">
			<view class="section-header">
				<text class="section-title">关于我们</text>
				<view class="title-divider"></view>
			</view>

			<view class="about-card" @click="previewPoster">
				<view class="card-glow"></view>
				<view class="about-content">
					<view class="poster-container">
						<image 
							class="poster-image" 
							:src="getImageUrl(institutionData.imageUrl)" 
							mode="aspectFill"
						></image>
						<view class="poster-overlay">
							<text class="overlay-text">点击查看大图</text>
						</view>
					</view>
					<view class="institution-info">
						<text class="institution-name">{{ institutionData.institutionName || '专业辅导班' }}</text>
						<text class="institution-desc">专业的教育培训机构，致力于提供优质的教学服务</text>
						<view class="info-items">
							<view class="info-item">
								<text class="info-icon">📍</text>
								<text class="info-text">{{ institutionData.institutionAddress || '北京市海淀区' }}</text>
							</view>
							<view class="info-item">
								<text class="info-icon">📧</text>
								<text class="info-text">{{ institutionData.institutionEmail || 'contact@tutor.com' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 意见反馈 -->
		<view class="feedback-section">
			<view class="section-header">
				<text class="section-title">意见反馈</text>
				<view class="title-divider"></view>
			</view>
			
			<view class="feedback-card">
				<view class="card-glow"></view>
				<view class="feedback-form">
					<view class="form-item">
						<text class="form-label">反馈类型</text>
						<picker 
							class="form-picker" 
							:value="feedbackTypeIndex" 
							:range="feedbackTypes" 
							@change="onFeedbackTypeChange"
						>
							<view class="picker-content">
								<text class="picker-text">{{ feedbackTypes[feedbackTypeIndex] }}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>
					
					<view class="form-item">
						<text class="form-label">反馈内容</text>
						<textarea 
							class="form-textarea" 
							v-model="feedbackContent" 
							placeholder="请详细描述您的问题或建议..."
							maxlength="500"
						></textarea>
						<text class="char-count">{{ feedbackContent.length }}/500</text>
					</view>
					
					<view class="form-item">
						<text class="form-label">联系方式（选填）</text>
						<input 
							class="form-input" 
							v-model="feedbackContact" 
							placeholder="手机号或邮箱"
						/>
					</view>
					
					<button class="submit-btn" @click="submitFeedback">
						<text class="btn-text">提交反馈</text>
						<text class="btn-icon">→</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 底部间距 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script>
import { getApiUrl, getRequestConfig, API_CONFIG, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			contactInfo: {
				phone: '',
				wechat: '',
				qq: ''
			},
			institutionData: {
				imageUrl: '',
				institutionName: '',
				institutionAddress: '',
				institutionPhone: '',
				institutionEmail: ''
			},
			feedbackTypeIndex: 0,
			feedbackTypes: ['功能建议', '问题反馈', '投诉举报', '其他'],
			feedbackContent: '',
			feedbackContact: ''
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData() {
			try {
				await Promise.all([
					this.loadContactInfo(),
					this.loadInstitutionData()
				])
			} catch (error) {
				console.error('加载数据失败:', error)
			}
		},

		async loadContactInfo() {
			try {
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.CUSTOMER_SERVICE),
					...getRequestConfig()
				})
				
				if (response.data) {
					this.contactInfo = {
						phone: response.data.phone || '400-123-4567',
						wechat: response.data.wechat || 'english_service',
						qq: response.data.qq || '123456789'
					}
				}
			} catch (error) {
				console.error('获取客服信息失败:', error)
			}
		},

		async loadInstitutionData() {
			try {
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.ABOUT_US),
					...getRequestConfig()
				})
				
				if (response.data) {
					this.institutionData = {
						imageUrl: response.data.imageUrl,
						institutionName: response.data.institutionName || '专业辅导班',
						institutionAddress: response.data.institutionAddress || '北京市海淀区',
						institutionPhone: response.data.institutionPhone || '010-12345678',
						institutionEmail: response.data.institutionEmail || 'contact@tutor.com'
					}
				}
			} catch (error) {
				console.error('获取机构信息失败:', error)
			}
		},

		makeCall() {
			const phone = this.contactInfo.phone
			uni.showModal({
				title: '拨打电话',
				content: `确定要拨打 ${phone} 吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: phone
						})
					}
				}
			})
		},

		copyWechat() {
			const wechat = this.contactInfo.wechat
			uni.setClipboardData({
				data: wechat,
				success: () => {
					uni.showToast({
						title: '微信号已复制',
						icon: 'success'
					})
				}
			})
		},

					// 获取图片URL，处理临时路径和localhost
			getImageUrl(url) {
				// 如果URL为空或不是字符串，返回默认图片
				if (!url || typeof url !== 'string') {
					return '/static/about-poster.jpg'
				}
				
				// 检查是否是临时路径
				if (url.includes('tmp/') || url.includes('http://tmp/') || url.includes('__tmp__/')) {
					console.warn('检测到临时路径图片URL:', url)
					return '/static/about-poster.jpg'
				}
				
				// 如果已经是完整URL，检查是否需要替换localhost（处理8080和8090端口）
				if (url.startsWith('http://') || url.startsWith('https://')) {
					if (url.includes('localhost:8080') || url.includes('localhost:8090')) {
						return url.replace(/http:\/\/localhost:(8080|8090)/, API_CONFIG.BASE_URL)
					}
					return url
				}
				
				// 如果是相对路径（以/开头），转换为完整的服务器URL
				if (url.startsWith('/')) {
					return `${API_CONFIG.BASE_URL}${url}`
				}
				
				// 其他情况，尝试添加基础URL
				return `${API_CONFIG.BASE_URL}/${url}`
			},

			previewPoster() {
				const imageUrl = this.getImageUrl(this.institutionData.imageUrl)
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl],
						current: imageUrl
					})
				}
			},

		onFeedbackTypeChange(e) {
			this.feedbackTypeIndex = e.detail.value
		},

		submitFeedback() {
			if (!this.feedbackContent.trim()) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '提交中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				
				uni.showModal({
					title: '提交成功',
					content: '感谢您的反馈，我们会认真处理您的建议。',
					showCancel: false,
					success: () => {
						// 重置表单
						this.feedbackTypeIndex = 0
						this.feedbackContent = ''
						this.feedbackContact = ''
					}
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	.golden-line {
		position: absolute;
		background: linear-gradient(to right, #00B8D4, #1976D2);
		opacity: 0.3;
		filter: blur(10px);

		&.line-1 {
			width: 100%;
			height: 2px;
			top: 20%;
			left: 0;
		}

		&.line-2 {
			width: 100%;
			height: 2px;
			bottom: 20%;
			left: 0;
		}
	}

	.golden-circle {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
		filter: blur(10px);

		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: 10%;
			right: -50rpx;
		}

		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			top: 60%;
			left: -30rpx;
		}

		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			bottom: 20%;
			right: 20%;
		}
	}
}

.help-header {
	margin: 40rpx 20rpx;
	padding: 60rpx 40rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 24rpx;
	text-align: center;
	box-shadow: 0 12rpx 48rpx rgba(25, 118, 210, 0.4);
	border: 2rpx solid rgba(0, 184, 212, 0.3);
	position: relative;
	z-index: 2;

	.header-content {
		.help-icon {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 30rpx;
			
			.icon-text {
				font-size: 60rpx;
			}
		}
		
		.help-title {
			display: block;
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 12rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
		
		.help-subtitle {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		}
	}
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;

	.section-title {
		font-size: 32rpx;
		color: #00B8D4;
		font-weight: bold;
		background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
	}

	.title-divider {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(to right, transparent, #00B8D4, transparent);
		margin-left: 20rpx;
	}
}

.quick-contact {
	margin: 30rpx 20rpx;
	position: relative;
	z-index: 2;

	.contact-cards {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.contact-card {
			background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
			border-radius: 20rpx;
			padding: 24rpx 30rpx;
			border: 1rpx solid rgba(0, 184, 212, 0.2);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&:active {
				transform: scale(0.98);
			}

			.card-glow {
				position: absolute;
				top: -2rpx;
				left: -2rpx;
				right: -2rpx;
				bottom: -2rpx;
				border-radius: 22rpx;
				z-index: -1;
				filter: blur(4rpx);
				opacity: 0.6;
			}

			.card-content {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
			}

			.contact-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
				flex-shrink: 0;

				&.phone-icon {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				}

				&.wechat-icon {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				}

				.icon-text {
					font-size: 28rpx;
				}
			}

			.contact-info {
				flex: 1;
				margin-right: 20rpx;

				.contact-title {
					display: block;
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 600;
					margin-bottom: 6rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.contact-value {
					display: block;
					font-size: 24rpx;
					color: #00B8D4;
					margin-bottom: 4rpx;
					font-weight: 500;
				}

				.contact-desc {
					font-size: 20rpx;
					color: #AAB4BE;
					opacity: 0.9;
				}
			}

			.contact-action {
				flex-shrink: 0;

				.action-text {
					font-size: 22rpx;
					color: #1976D2;
					font-weight: 600;
					padding: 8rpx 16rpx;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
					border-radius: 16rpx;
					border: 1rpx solid rgba(0, 184, 212, 0.2);
				}
			}
		}

		.primary-card {
			border: 1rpx solid rgba(0, 184, 212, 0.4);
			
			.card-glow {
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.4), rgba(25, 118, 210, 0.4));
			}
		}

		.secondary-card {
			border: 1rpx solid rgba(76, 175, 80, 0.4);
			
			.card-glow {
				background: linear-gradient(135deg, rgba(76, 175, 80, 0.4), rgba(139, 195, 74, 0.4));
			}
		}
	}
}

.about-section {
	margin: 30rpx 20rpx;
	position: relative;
	z-index: 2;

	.about-card {
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 20rpx;
		border: 1rpx solid rgba(0, 184, 212, 0.2);
		overflow: hidden;
		position: relative;

		&:active {
			transform: scale(0.98);
		}

		.card-glow {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			right: -2rpx;
			bottom: -2rpx;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.3), rgba(25, 118, 210, 0.3));
			border-radius: 22rpx;
			z-index: -1;
			filter: blur(4rpx);
			opacity: 0.6;
		}

		.about-content {
			.poster-container {
				position: relative;
				height: 400rpx;

				.poster-image {
					width: 100%;
					height: 100%;
				}

				.poster-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: opacity 0.3s ease;

					.overlay-text {
						color: #FFFFFF;
						font-size: 28rpx;
						background: rgba(0, 0, 0, 0.7);
						padding: 12rpx 24rpx;
						border-radius: 20rpx;
						font-weight: 500;
					}
				}

				&:active .poster-overlay {
					opacity: 1;
				}
			}

			.institution-info {
				padding: 30rpx;

				.institution-name {
					display: block;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 16rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.institution-desc {
					display: block;
					font-size: 26rpx;
					color: #AAB4BE;
					line-height: 1.5;
					margin-bottom: 24rpx;
				}

				.info-items {
					.info-item {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						padding: 12rpx 0;

						&:last-child {
							margin-bottom: 0;
						}

						.info-icon {
							font-size: 24rpx;
							margin-right: 16rpx;
							width: 32rpx;
						}

						.info-text {
							font-size: 24rpx;
							color: #AAB4BE;
							flex: 1;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}
}

.feedback-section {
	margin: 30rpx 20rpx;
	position: relative;
	z-index: 2;

	.feedback-card {
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 20rpx;
		border: 1rpx solid rgba(0, 184, 212, 0.2);
		position: relative;
		overflow: hidden;

		.card-glow {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			right: -2rpx;
			bottom: -2rpx;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.3), rgba(25, 118, 210, 0.3));
			border-radius: 22rpx;
			z-index: -1;
			filter: blur(4rpx);
			opacity: 0.6;
		}

		.feedback-form {
			padding: 30rpx;
			position: relative;
			z-index: 1;

			.form-item {
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.form-label {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 16rpx;
					font-weight: 500;
				}

				.form-picker {
					width: 100%;
					background: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					border: 2rpx solid rgba(0, 184, 212, 0.3);

					.picker-content {
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 24rpx;

						.picker-text {
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.picker-arrow {
							font-size: 20rpx;
							color: #00B8D4;
							font-weight: bold;
						}
					}
				}

				.form-textarea {
					width: 100%;
					height: 200rpx;
					background: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					padding: 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid rgba(0, 184, 212, 0.3);
					margin-bottom: 12rpx;
					box-sizing: border-box;

					&:focus {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.05);
					}
				}

				.char-count {
					font-size: 24rpx;
					color: #AAB4BE;
					text-align: right;
				}

				.form-input {
					width: 100%;
					height: 80rpx;
					background: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid rgba(0, 184, 212, 0.3);
					box-sizing: border-box;

					&:focus {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.05);
					}
				}
			}

			.submit-btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				border-radius: 44rpx;
				border: none;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.4);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					box-shadow: 0 3rpx 12rpx rgba(25, 118, 210, 0.6);
				}

				.btn-text {
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 600;
					margin-right: 8rpx;
				}

				.btn-icon {
					color: #FFFFFF;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}
}

.bottom-space {
	height: 60rpx;
}
</style> 